<template>
	<view class="warp" style="padding: 30rpx;">
		<view name="content">
			<view class="tip mt20">
				反馈内容
			</view>
			<textarea placeholder="请详细填写反馈内容" @input="binddata('content', $event.detail.value)"
				class="uni-textarea-border mt30" v-model="text" trim="right"></textarea>
		</view>
		<view class="tip mt20">
			上传图片
		</view>
		<view name="imgs" class="mt30 flex" style="justify-content: start;">
			<image v-for="(item,index) in imgArr" :src="item" style="width: 140rpx;height: 140rpx;margin-left: 30rpx;"
				mode="aspectFill"></image>
			<view class="iconfont" @click="uploadImg" style="font-size: 140rpx;color: #f0f0f0;margin-left: 30rpx;">
				&#xe60f;</view>
		</view>
		<view class="uni-button-group">
			<button type="primary" class="uni-button " style="background-color: #007AFF;" @click="submit">提交反馈</button>
		</view>
	</view>
</template>

<script>
	import {
		set_feedback,
		upload
	} from "../../../api/api.js"
	export default {
		data() {
			return {
				imgArr: [],
				text: "",
			}
		},

		methods: {
			uploadImg() {
				let that = this
				uni.chooseImage({
					success: (res) => {
						// 获取的格式是数组，多选会同时返回，单选只返回一项
						this.imgArr = res.tempFilePaths;
						// 若多选，需循环调用uni.uploadFile ，因微信小程序只支持单文件上传
						console.log(this.imgArr)
						uni.uploadFile({
							url: 'https://xcx.ttpcm.com/api/Upload/upload', //仅为示例，非真实的接口地址
							filePath: this.imgArr,
							name: 'file',
							// methods:'post',
							formData: {
								'user': 'test' // 上传附带参数
							},
							success: (res) => {
								// 根据接口具体返回格式   赋值具体对应url
								console.log(res.data);
							}
						});
					}
				});
				// uni.chooseImage({
				// 	success(res) {
				// 		console.log(res)
				// 		that.imgArr = res.tempFilePaths;
				// 		upload(that.imgArr).then(res => {

				// 		})
				// 	}
				// })
			},
			/**
			 * 触发表单提交
			 */
			submit() {
				// 请求首页数据
				let data = {
					user_id: "",
					text: this.text,
				}
				let sign = this.$util(data)
				if (!data.text || !data.user_id) {
					uni.showToast({
						title: '请完善信息再提交!',
						duration: 1000
					})
				} else {
					set_feedback(sign).then(res => {
						uni.showToast({
							title: res.msg,
						})
					})
				}
			},

		}
	}
</script>

<style scoped lang="less">
	.uni-container {
		padding: 15px;
	}

	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;
	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
		width: 90%;
	}

	.uni-button-group {
		margin-top: 50px;
		display: flex;
		justify-content: center;
		flex-direction: row;
	}

	.uni-button {
		width: 184px;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
		line-height: 1;
		margin: 0;
	}

	.uni-container /deep/ .uni-file-picker__container {
		flex-direction: row;
	}
</style>
